<template>
	<view>

		<view class="nav">
			<image class="nav-bg" src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-bg.png"
				mode="" />
			<view class="pk">
				<image class="arrow" src="/static/icons/nav-arrow.png" @click="goBack()" />
				<text>碰一碰</text>
			</view>
		</view>
		<view class="detail-content">
			<view class="topdes">
				<view class="leftgoods">
					<image :src="detail.main_photo" class="goodsimg"></image>
				</view>
				<view class="rightcontent">
					<image class="titleicon" src="/static/pengyipeng/title.png"></image>
					<text class="bottom_txt">
						两张相同即为一碰，每碰一次加一张，许愿成功加一张；(首轮9张不同则为0碰)11碰以上获得额外奖励
					</text>
				</view>
			</view>
			<view class="scrollbg">
				<view class="scroll-content">

					<view class="csrollitem" v-for="(e,i) in prizelist" :key="i">
						<view class="scrollflex">
							<view class="avatarbod">
								<image :src="e.avatar" class="avatar"></image>
							</view>
							<view class="rightuser">
								<text class="phone">{{e.nickname}}</text>
								<view class="bottom_c">
									<image src="/static/pengyipeng/get.png" class="get"></image>
									<view class="name">{{e.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<prize-game-tab v-model:tab="tab" :tabs="tabs" @change="() => changeTab(tab)"
				style="display: block; margin-top: 20px; " />
			<view class="tab-content">
				<view v-if="tab === '赏品一览'" class="products-list">
					<image src="/static/pengyipeng/rewardicon.png" class="rewardicon"></image>
					<view class="products-list">
						<view class="item" v-for="(item,i) in detail.products" :key="item.id"
							@click="showDialogImage(item)">
							<view class="img">
								<image class="game-img" :src="item.image" />
								<view class="tag" v-if="item.number_start ==item.number_end">{{ item.number_start }}碰
								</view>
								<view class="tag" v-else-if="item.number_end > 0">
									{{ item.number_start }}-{{ item.number_end }}碰</view>
								<view class="tag" v-else-if="item.number_end === 0">{{ item.number_start }}碰以上</view>
							</view>
							<view class="name">
								{{ item.name }}
							</view>
							<view class="price">
								￥{{ item.price }}
							</view>
						</view>
					</view>
				</view>
				<view v-if="tab === '中奖记录'" class="combat-records">
					<template v-for="(item, index) in recordList" :key="index">
						<list-item>
							<record-content :avatar-src="item.avatar" :name="item.nickname" :datetime="item.created_at"
								:prize-type="item.type" :prize-name="item.name" style="width: 100%" />
						</list-item>
					</template>

					<view v-if="recordListTotal === recordList.length"></view>
				</view>
			</view>

			<view class="buy-area">
				<view class="leftshare" @click="share">
					<image class="share" mode="widthFix" src="/static/pengyipeng/share.png"></image>
					<text class="txt">分享</text>
					<button open-type="share" class="shareBtn"></button>
				</view>
				<view class="leftshare" @click="record">
					<image class="record" mode="widthFix" src="/static/pengyipeng/record.png"></image>
					<text class="txt">参与记录</text>
				</view>
				<button class="btn" @click="gotouchdetail()">立即参与</button>
			</view>

			<van-dialog use-slot :show="isCouponModalVisible" :show-confirm-button="false" width="312">
				<prize-dialog-content :image="dialogItem.image" :name="dialogItem.name" :price="dialogItem.price"
					v-on:close="closeCouponModal" />
			</van-dialog>

			<pay v-if="payBoxShow" :wishItems="detail.wish_items" :gameId="detail.id" gameType="对对碰"
				:image="detail.main_photo" :price="buyPrice" :title="detail.name" :count="1" :position="0" :isFull="0"
				@close="closePayDialog" @success="showGiftsDialog" />

			<!-- gifts popup -->
			<van-dialog use-slot :show="giftsDialogVisible" :show-confirm-button="false" width="312">
				<gifts-dialog-content :gifts="gifts" v-on:close="closeGiftsDialog" />
			</van-dialog>
		</view>
		<van-dialog use-slot :show="gameDialogVisible" :show-confirm-button="false" width="312">
			<view class="coupon-dialog-content">
				<image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" />
				<view class="alipay">
					<view class="title">
						当前有游戏进行中
					</view>
					<view class="pay-btn1" @click="gogame">
						立即进入
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'PKdetail'
	}
</script>

<script lang="ts" setup>
	import RecordContent from './shared/record-content'
	import PrizeGameTab from './shared/prize-game-tab/index.vue'
	import ListItem from '@/wxcomponents/list-item'
	import dialogCloseBtn from '@/static/coupon-dialog-close.png';
	import moment from 'moment'
	import PrizeDialogContent from '@/wxcomponents/prize-dialog-content'
	import Pay from '@/wxcomponents/pay'
	import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
	import { loadDetail, coupleloadRecord, loadWaiting, prizerecord } from "@/api/touch"
	import { onLoad, onReachBottom, onPullDownRefresh, onShow } from "@dcloudio/uni-app"
	import { ref, reactive, defineProps, onUnmounted, computed } from 'vue'
	import { buyPk, recharge, checkWallet } from "@/api/pay";
	let gameId = ref(0)
	let banners = ref([])
	let detail = ref({
		name: "",
		main_photo: "",
		price: 0,
		wish_items: [],
		list: [],
		pool: []
	})
	const tab = ref('赏品一览')
	const tabs = ref(['赏品一览', '中奖记录'])
	// 服务器端统计的总数据量
	const recordListTotal = ref(null)
	
	// 中奖记录数据分页
	const recordListPage = ref(1)
	let gameDialogVisible = ref(false)
	let isCouponModalVisible = ref(false)
	let rechargePrices = ref([])
	let prizelist = ref([])
	let dialogItem = ref({})
	const emits = defineEmits(['success'])
	let payBoxShow = ref(false)
	let buyPrice = ref(0)
	let buyCount = ref(0)
	let buyPosition = ref(0)
	let isFull = ref(0)
	let recordList = ref([])
	let currentDate = ref('')
	let recordCurrentPage = ref(1)
	let recordTotal = ref(100)
	function record() {
		uni.navigateTo({
			url: '/pages/subPackage/touchRecord?id=' + gameId.value
		})
	}
	const gifts = ref([])
	const giftsDialogVisible = ref(false)
	const shareData = computed(() => { // 分享的数据
		return {
			title: detail.value.name,
			imageUrl: detail.value.main_photo
		}
	})
	function showGiftsDialog() {
		gogame()
	}

	function closeGiftsDialog() {
		giftsDialogVisible.value = false
		// TODO 这里需要对弹窗内的动作做更细分的判断
		emits('success')
	}
	onPullDownRefresh(async () => {
		await getDetail()
		getprizerecord()
		uni.stopPullDownRefresh();//停止刷新
	})
	onReachBottom(async () => {
		if (tab.value !== '中奖记录') {
			return
		}
		await listRecords({ refresh: false })
	})
	
	async function gotouchdetail() {
		payBoxShow.value = true
		buyPrice.value = detail.value.price
	}
	async function changeTab(tab) {
		switch (tab) {
			case '赏品一览':
				await getDetail()
				return

			case '中奖记录':
				await listRecords({ refresh: true });
				return
		}
	}
	async function listRecords({ refresh = true }) {
		if (tab.value !== '中奖记录') {
			return
		}

		if (!refresh && recordListTotal.value === recordList.value.length) {
			// 已获取了全部数据量，不再发送加载更多的请求
			return
		}

		const params = {
			page: refresh ? 1 : recordListPage.value + 1,
			size: 15,
			game_id: gameId.value,
			type: '对对碰',
			index: 1
		}

		const res = await coupleloadRecord(params)
		const data = res.data || {}
		const items = data['items'] || []
		recordListTotal.value = data.total
		recordList.value = refresh ? items : recordList.value.concat(items)
		recordListPage.value = params.page
	}
	function closePayDialog() {
		payBoxShow.value = false
	}

	function goBack() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	function gogame() {
		uni.navigateTo({
			url: '/pages/index/touchdetail?id=' + gameId.value
		})
		setTimeout(() => {
			gameDialogVisible.value = false
		}, 200)
	}

	async function getprizerecord() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await prizerecord(params)
		// 商品价格从单位分转为元
		prizelist.value = data.items
	}
	async function getDetail() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await loadDetail(params)

		// 商品价格从单位分转为元
		for (let i = 0; i < data.products.length; i++) {
			data.products[i].price = (data.products[i].price / 100).toFixed(2)
			data.products[i].showStock = "数量:" + data.products[i].stock + "/" + data.products[i].count
		}
		for (let i = 0; i < data.pool.length; i++) {
			data.pool[i].price = (data.pool[i].price / 100).toFixed(2)
			data.pool[i].showStock = "数量:" + data.pool[i].stock + "/" + data.pool[i].count
		}
		detail.value = data
	}
	function onClose() {
		gameDialogVisible.value = false
	}
	async function getloadWaiting() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await loadWaiting(params)
		if (data.state == "进行中") {
			gameDialogVisible.value = true
		}
	}

	function showDialogImage(item) {
		dialogItem.value = {
			image: item.image,
			name: item.name,
			price: item.price,
		}
		isCouponModalVisible.value = true
	}

	function closeCouponModal() {
		isCouponModalVisible.value = false;
	}

	onLoad(async (options) => {
		const id = options.id || 0
		if (!id) {
			uni.showToast({
				title: 'id参数错误',
				icon: 'none'
			})
			return
		}
		gameId.value = id
		await getDetail()
		getprizerecord()
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值

	});
	onShow(() => {
		getloadWaiting()
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值
	})
</script>



<style lang="scss">
	@import 'src/static/scss/maincommon';

	.alipay {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx;
		justify-content: space-between;

		.pay-btn1 {
			width: 100%;
			text-align: center;
			height: 80rpx;
			background: linear-gradient(90deg, #E174ED 0%, #2F76EC 100%);
			line-height: 80rpx;
			border-radius: 40rpx;
			margin-top: 50rpx;
			color: #ffffff;
			font-size: 30rpx;
		}

		.title {
			margin-top: 50rpx;
			color: #ffffff;
			font-size: 30rpx;
		}
	}

	.coupon-dialog-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, #303030 0%, #0F0F0F 100%);
		padding: 30rpx 20rpx;
		position: relative;
	}



	.close-btn {
		position: absolute;
		top: 15px;
		right: 10px;
		width: 20px;
		height: 20px;
	}

	.scrollbg {
		white-space: nowrap;
		overflow: hidden;
		box-sizing: border-box;
		margin-top: 20rpx;

		.scroll-content {
			display: inline-block;
			animation: scroll 18s linear infinite;

			.csrollitem {
				display: inline-block;
				margin-right: 20rpx;
				box-sizing: border-box;

				.scrollflex {
					background: url("/static/pengyipeng/userbg.png");
					background-position: 0;
					background-repeat: no-repeat;
					background-size: cover;
					max-width: 334rpx;
					min-height: 136rpx;
					display: flex;
					flex-direction: row;
					box-sizing: border-box;
					padding: 0 20rpx;
					align-items: center;
					overflow: hidden;

					.avatarbod {
						border: solid 2rpx #5E5E5E;
						margin-right: 4rpx;

						.avatar {
							width: 68rpx;
							height: 68rpx;
							border-radius: 50%;
						}
					}

					.rightuser {
						// flex: 1;
						width: 285rpx;
						display: flex;
						flex-direction: column;

						.phone {
							font-size: 20rpx;
							color: #FFFFFF;
						}

						.bottom_c {
							display: flex;
							flex-direction: row;
							font-size: 20rpx;
							color: #FFFFFF;

							.get {
								width: 56rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}

							.name {
								flex: 1;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

	}


	@keyframes scroll {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-80%);
			/* 根据内容宽度调整 */
		}
	}

	.topdes {
		width: 100%;
		min-height: 300rpx;
		background-image: url("/static/pengyipeng/topbg.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.leftgoods {
			border: solid 2rpx #5E5E5E;
			width: 164rpx;
			height: 164rpx;
			margin-right: 20rpx;

			.goodsimg {
				width: 164rpx;
				height: 164rpx;
			}
		}

		.rightcontent {
			display: flex;
			flex-direction: column;

			.titleicon {
				width: 142rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}

			.bottom_txt {
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 30rpx;
			}
		}
	}

	.content {
		padding: 0;
	}

	.nav {
		width: 100%;
		height: 180rpx;
		color: #FFF;
		line-height: 300rpx;
		position: relative;

		.nav-bg {
			width: 100%;
			height: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pk {
			padding-left: 40rpx;
			position: relative;
			z-index: 100;

			.arrow {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}
	}

	.detail-content {
		padding: 0 30rpx 30rpx;

		.tab-content {
			padding-bottom: 250rpx;
			margin-top: 30rpx;
			color: #FFF;
		}

		.rewardicon {
			width: 172rpx;
			height: 46rpx;
			margin: 20rpx 0;
		}

		.products-list {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 30%;
				margin: 8rpx;

				.img {
					// width: 220rpx;
					height: 176rpx;
					padding: 20rpx;
					background-image: url("~@/static/pk-productbg.png");
					background-size: cover;
					background-repeat: no-repeat;
					position: relative;
					font-size: 16rpx;

					.game-img {
						width: 170rpx;
						height: 170rpx;
					}

					.tag {
						height: 40rpx;
						padding: 0 8rpx;
						position: absolute;
						top: 20rpx;
						border-radius: 0rpx;
						font-size: 26rpx;
						text-align: center;
						line-height: 40rpx;
						background: linear-gradient(90deg, rgba(225, 116, 237, 1) 0%, rgba(47, 118, 236, 1) 100%);
					}
				}

				.name {
					margin-top: 5rpx;
					font-size: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.price {
					margin-top: 5rpx;
					font-size: 20rpx;

					.number {
						color: #B0B0B0;
					}
				}
			}
		}

	}

	.buy-area {
		width: 100%;
		height: 200rpx;
		padding-top: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		box-sizing: border-box;
		padding: 0 20rpx;

		// background-color: #0A050B;
		.leftshare {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-right: 20rpx;
			position: relative;

			.record {
				width: 44rpx;
				height: 44rpx;
			}

			.share {
				width: 44rpx;
				height: 44rpx;
			}

			.txt {
				font-size: 28rpx;
				color: #ffffff;
			}

			.shareBtn {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 99;
			}
		}

		.btn::after {
			border: none;
		}

		.btn {
			margin: 0;
			padding: 0;
			line-height: 80rpx;
			height: 80rpx;
			flex: 1;
			background: linear-gradient(to right, #205DE9, #8E6CF4);
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
</style>